<template>
    <div id='tel'>
        <div class='cate'>
            <ul v-bind="{style:'width:'+totleWidth+'px'}">
                <li @click='getImg(0)'>全部</li>
                <li v-for='item in list' @click='getImg(item.id)'>{{item.title}}</li>
            </ul>
        </div>
        <!--图片列表显示-->
        <div class='imgList'>
            <ul>
                <li v-for="item in imgs">
                    <img v-lazy="item.img_url">
                    <div class="des">
                        <h4>{{item.title}}</h4>
                        <p>{{item.zhaiyao}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import common from '../kits/common.js';
    import { Toast } from 'mint-ui';
    export default{
        data(){
            return {
                totleWidth:0,
                list:[],
                imgs:[
                    /*{"id":50,"title":"有气质且带可爱的美女组图","img_url":"http://182.254.146.100:8080/upload/201504/18/thumb_201504181416251481.jpg","zhaiyao":"有气质且带可爱的美女组图有气质且带可爱的美女组图有气质且带可爱的美女组图"},
                    {"id":51,"title":"超甜美的韩国美女美图欣赏","img_url":"http://182.254.146.100:8080/upload/201504/18/thumb_201504181420529760.jpg","zhaiyao":"收集了甜素纯美女写真图1等精彩图片,同时汇集美女图片,搞笑图片,奇闻趣事,风景图片,明星写真,娱乐八卦,气质,清纯,非主流,美女,高清图片"}*/
                    ],
                id:0
            }
        },
        created(){
            this.getImgList();
            this.getImg(0);//表示获取所有数据
        },
        methods:{
            //图片分类导航列表
            getImgList(){
                var url=common.apidomain+'/api/getimgcategory';
                this.$http.get(url).then(function (response) {
                    var body=response.body;
                    if(body.status!=0){
                        Toast(body.message);
                        return;
                    }
                    this.list=body.message;
                    //计算当前ul的宽度
                    var num=body.message.length+1;
                    var wid=61;
                    this.totleWidth=num*wid;
                })
            },

            //图片请求
            getImg(cateId){
                var cateId=cateId||0;
                var url=common.apidomain+'/api/getimages/'+cateId;
                this.$http.get(url).then(function (response) {
                    var body=response.body;
                    if(body.status!=0){
                        Toast(body.message);
                        return;
                    }
                    this.imgs=body.message;
                })
            }

        }
    }
</script>


<style>
    .cate ul li {
        list-style: none;
        display: inline-block;
        font-size: 14px;
        color: rgba(0,0,0,0.5);
        padding-left: 5px;
        font-family: "Microsoft JhengHei";
        cursor: pointer;
    }
    .cate {
        width: 320px;
        overflow-x: auto;
    }
    .cate ul {
        padding-left: 20px;
    }
    .imgList image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    .imgList ul {
        padding: 0;
    }
    .imgList li {
        list-style: none;
        position: relative;
    }
    .imgList li img {
        width: 100%;
        height: 300px;
    }
    .imgList .des {
        position: absolute;
        left: 0;
        bottom: 5px;
        background-color: rgba(0,0,0,0.4);
    }
    .imgList .des h4 {
        font-family: "Microsoft Yahei";
        font-size: 18px;
        color: #61aeee;
    }
    .imgList .des p {
        color: white;
    }
</style>